<template>
  <div class="main">
    <el-container style="height: 100%">
      <!-- 头部 -->
      <el-header height="100px">
        <MyHeader />
      </el-header>
      <!-- 导航条 -->
      <el-header height="48px" v-if="isNoLayout">
        <MyNavBar />
      </el-header>
      <!-- 主题内容 -->

      <router-view></router-view>
    </el-container>
  </div>
</template>

<script setup>
import MyHeader from "./layout/MyHeard.vue";

import MyNavBar from "./layout/MyNavBar.vue";

/**
 * 引组件
 */

import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
// const router = useRouter();

const isNoLayout = ref(false);
// 监听路由的变化
watch(
  () => route.fullPath,
  () => {
    // 判断当前路由是否包含/nolayout
    if (route.fullPath.indexOf("/nolayout") > -1) {
      // 包含/nolayout 则不显示头部
      isNoLayout.value = false;
    } else {
      isNoLayout.value = true;
    }
  }
);

onMounted(() => {
  console.log(route.fullPath, "路由");
  // 判断当前路由是否包含/nolayout
  if (route.fullPath.indexOf("/nolayout") > -1) {
    // 包含/nolayout 则不显示头部
    isNoLayout.value = false;
  } else {
    isNoLayout.value = true;
  }
});
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;

  .el-header {
    --el-header-padding: 0;
  }
}


/* :deep(.el-overlay-dialog .custom_class) {
  border-radius: 15px !important;
} */
</style>
